<template>
    <!-- 人员列表 -->
    <div id="bus-list" :style="{height: `${height}px`}">
        <div class="content" v-show="contentShow">
            <div 
            v-for="(itemPar, index) in optIdList"
            :id="optList[itemPar].id"
            :key="index"
            v-show="optListAct === optList[itemPar].id"
            class="list">
                <ul class="ul">
                    <li 
                    v-for="(item, index) in optList[itemPar].list" 
                    :key="`${item.user.userId}${index}`" class="association-member-li member-li"
                    @click.stop="toUser(item.user.userId, item.thumbSty.tag)"
                    >
                        <div class="association-member-li-top">
                            <div class="association-member-li-left">
                                <div class="thumb-box" :class="item.thumbSty.thumbClass">
                                    <user-head-img 
                                    :userImg="item.user.headImg"
                                    :height="item.thumbSty.height"
                                    :width="item.thumbSty.width"
                                    class="thumb-box-img"
                                    @click.stop
                                    ></user-head-img>
                                    <span>{{item.thumbSty.thumbText}}</span>
                                </div>
                            </div>
                            <div class="association-member-li-right">
                                <div class="association-member-li-right-top">
                                    <div class="association-member-li-right-top-left">
                                        <span class="user-name">{{item.user.nickName}}</span> 
                                    </div>
                                </div>
                                <div v-if="item.user.signature" class="color-999">{{item.user.signature}}</div>
                                <div class="association-member-li-right-bottom">
                                    <div class="left">
                                        <sex-icon class="icon" :sex="item.user.sex"></sex-icon>
                                        <span v-if="item.demandText.length > 0" class="opt-tag icon">有需求</span>
                                        <span v-if="item.isPartner" class="opt-tag icon">互助</span>
                                        <span v-if="item.isIssWechat" class="opt-tag icon">微信群</span>
                                        <span v-if="item.seminar && item.seminarWorking" class="woshop-working icon">主讲中</span>
                                        <span v-else-if="item.seminar" class="opt-tag icon">主讲</span>
                                    </div>
                                </div>
                            </div> 
                        </div>
                        <div class="user-info-options">
                            <user-info-option :selectionId="optList[itemPar].id" :optId="'area'" optName="位置" :optVal="item.area"></user-info-option>
                            <user-info-option :selectionId="optList[itemPar].id" :optId="'company'" optName="企业" :optVal="item.company"></user-info-option>
                            <user-info-option :selectionId="optList[itemPar].id" :optId="'yourSelf'" optName="介绍" :optVal="item.yourSelf"></user-info-option>
                            <user-info-option :selectionId="optList[itemPar].id" :optId="'supply'" optName="供应" :optVal="item.supply"></user-info-option>
                            <user-info-option :selectionId="optList[itemPar].id" :optId="'demand'" optName="需求" :optVal="item.demand"></user-info-option>
                            <user-info-option :selectionId="optList[itemPar].id" :optId="'find'" optName="我找" :optVal="item.find"></user-info-option>
                            <user-info-option :selectionId="optList[itemPar].id" :optId="'myHelp'" optName="我帮" :optVal="item.myHelp"></user-info-option>
                        </div>
                        <div class="statistics">
                            {{item.updateTimeText}}更新 | <image-vant class="visit-count-icon" :src="visitBusIcon" :width="15" :height="15" /> {{item.viewCount}}
                        </div>
                    </li>
                </ul>
                <div :id="`${optList[itemPar].id}-empty-info`"></div>
            </div>
        </div>
        
		<page-empty ref="pageEmpty" @request="requestData" />

		<!-- 未设置业务名片弹窗 -->
		<need-set-bus-window
		:textOne="needSetBusWindow.textOne"
		:textSecond="needSetBusWindow.textTwo"
		:closeBtnText="needSetBusWindow.closeBtnText"
		:sureBtnText="needSetBusWindow.sureBtnText"
		:isShow="needSetBusWindow.isShow"
		:overlayShow="overlayShow"
		@hideOverlay="hideOverlayShow"
		></need-set-bus-window>

		<!-- 未登录弹窗 -->
		<need-login-window 
		@closeNeedLooginWindow="closeNeedLooginWindow" 
		:message="'请微信登录后继续查看!'"
		:isShow="needLoginWindow.isShow">
		</need-login-window>
		
		<!-- 绑定微信弹窗 -->
		<bind-wechat-window
		@closeBindWechatWindow="closeBindWechatWindow" 
		:isShow="bindWechatWindow.isShow"
        :message="`30秒绑定微信，查看更多!\n同时为您开通微信群业务信息展示权限！`"
		></bind-wechat-window>

        <!-- 覆盖层 -->
        <van-overlay :show="overlayShow" @click="toHideOverlay" />
    </div>
</template>

<script>
// 自定义组件
import UserHeadImg from '_components/project/common/UserHeadImg'
import UserInfoOption from '_components/project/MemberBusList/UserInfoOption'
import UserCardBtn from '_components/project/MemberBusList/UserCardBtn'
import NeedSetBusWindow from "_components/project/ShowWindow/NeedSetBusWindow"
import NeedLoginWindow from "_components/project/ShowWindow/NeedLoginWindow"
import BindWechatWindow from "_components/project/ShowWindow/BindWechatWindow"
import ImageVant from '_components/project/common/ImageVant'
import SexIcon from '_components/project/common/SexIcon'
import PageEmpty from "_components/project/common/PageEmpty"

// 自定义方法
import { getProImg } from "_projectFn/images"
import { getCookie } from '_commonFn/cookie.js'
import { commonRequestData } from '_network/request'
import { enterUserBus, enterUserIndex, } from "_projectFn/page"

// UI组件
import { Image, Lazyload, Overlay } from "vant"

import Vue from "vue"
Vue.use(Image).use(Lazyload).use(Overlay)

// 本地图片
import manSexIcon from "_assets/img/sex-man-icon.svg"
import womenSexIcon from "_assets/img/sex-women-icon.svg"
import parHelpRedIcon from "_assets/img/par-help-red-icon.svg"
import emptyContentImg from '_assets/img/empty-content-img.svg'
import scrollTop from '_assets/img/mescroll-totop.png'
import visitBusImg from '_assets/img/visit-mro-icon.svg'

// 引入mescroll.min.js和mescroll.min.css
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'

export default {
    name: 'List',
    props: {
        listData: {
            type: Array,
            default: []
        },
        height: {
            type: Number,
            default: 500
        },
        optList: {
            type: Object,
            default: {}
        },
        optListAct: {
            type: String,
            default: ''
        },
        pageBasicData: {
            type: Object,
            default: {}
        },
    },
    data() {
        return {
            mescroll: {
                member: null,
                demand: null,
                help: null,
            },
            sexImg: {
                man: getProImg("sex-man-icon.svg", manSexIcon),
                women: getProImg("sex-women-icon.svg", womenSexIcon),
                parHelp: getProImg("par-help-red-icon.svg", parHelpRedIcon),
            },
            scrollTopIcon: getProImg('mescroll-totop.png', scrollTop),
            emptyContentIcon: getProImg('empty-content-img.svg', emptyContentImg),
            visitBusIcon: getProImg("visit-mro-icon.svg", visitBusImg),
            userLevelIconData: {

            },
            overlayShow: false,
            needSetBusWindow: {
                textOne: '1分钟创建业务名片，查看更多！',
                textTwo: '同时为您开通社群业务信息展示权限！',
                closeBtnText: '关闭',
                sureBtnText: '创建业务名片',
                isShow: false,
            },
            needLoginWindow: {
                isShow: false,
            },
            bindWechatWindow: {
                isShow: false,
            },
            showWindow: '',
            request: {
                page: 1,
                area: undefined,
                key: ''
            },
            isDataFirstTask: 0, // 首次是否获取
            contentShow: true,
        }
    },
    methods: {
        resetUpScroll(act) {
            this.mescroll[act].resetUpScroll(true)
        },
        // 进入业务详情页面
        toUser(userId, tag) {
            if (userId) {
                if (tag === 'bus' || tag === 'stick') {
                    enterUserBus({
                        userId,
                        checkLogin: false,
                    })
                } else if (tag === 'index') {
                    enterUserIndex({
                        userId
                    })
                }
            }
        },
        userSexImg(sex) {
            if (sex === 1) {
                return this.sexImg.man
            } else if (sex === 2) {
                // console.log('this.sexImg.women', this.sexImg.women)
                return this.sexImg.women
            }
        },
        hideOverlayShow() {
			this.showWindow = ''
			this.needSetBusWindow.isShow = false
			this.needLoginWindow.isShow = false
			this.overlayShow = false
        },
        userLevelIcon(level) {

        },
        toHideOverlay() {
            this.overlayShow = false
        },
        showOverlay() {
            this.overlayShow = true
        },
		// 下拉重新加载
		downCallback() {
			setTimeout(() => {
				this.mescroll.endErr()
			}, 100)
		},
		// 上拉加载更多
		upCallback(page) {
			this.getMemberList(page) // 获取人员列表
		},
		closeNeedLooginWindow() {
			this.needLoginWindow.isShow = false
		},
		closeBindWechatWindow() {
			this.bindWechatWindow.isShow = false
		},
		returnDownCallback(id) {
			switch (id) {
                case 'member':
                    return this.memberDownCallback
                    break;
                case 'demand':
                    return this.demandDownCallback
                    break;
                case 'help':
                    return this.helpDownCallback
                    break;
                default:
                    return this.memberDownCallback
                    break;
            }
		},
		returnUpCallBack(id) {
			switch (id) {
                case 'member':
                    return this.memberUpCallback
                    break;
                case 'demand':
                    return this.demandUpCallback
                    break;
                case 'help':
                    return this.helpUpCallback
                    break;
                default:
                    return this.memberUpCallback
                    break;
            }
		},
		// 群员下拉重新加载
		memberDownCallback() {
            const that = this
			this.downCallback({
                callback() {
                    that.mescroll['member'].endErr()
                }
            })
		},
        // 需求下拉重新加载
		demandDownCallback() {
            const that = this
			this.downCallback({
                callback() {
                    that.mescroll['demand'].endErr()
                }
            })
		},
        // 互助下拉重新加载
		helpDownCallback() {
            const that = this
			this.downCallback({
                callback() {
                    that.mescroll['help'].endErr()
                }
            })
		},
		// 群员上拉加载更多
		memberUpCallback(page) {
            const that = this
            this.upCallback({
                callback() {
                    that.getMemberList(page)
                }
            })
        },
		// 需求上拉加载更多
		demandUpCallback(page) {
            const that = this
            this.upCallback({
                callback() {
                    that.getDemandList(page)
                }
            })
        },
		// 互助上拉加载更多
		helpUpCallback(page) {
            const that = this
            this.upCallback({
                callback() {
                    that.getHelpList(page)
                }
            })
        },
        upCallback({callback}) {
            typeof callback === 'function' && callback(true)
        },
        downCallback({callback}) {
            setTimeout(() => {
                typeof callback === 'function' && callback(true)
			}, 300)
        },
        checkIsGetMemberList(id, page) {
            if (page.num >= 2 && getCookie('Ticket') === '') {
                this.needLoginWindow.isShow = true
                this.mescroll[id].endErr()
                return false
            }
            if (this.isDataFirstTask) {
                // console.log("page.num", page.num)
                // console.log('this.pageBasicData', this.pageBasicData)
                if (page.num - 1 >= this.pageBasicData.viewGroupUserItemPage && this.pageBasicData.isSetBus == 0) {
                    // 显示设置业务名片弹窗
                    this.showOverlay()
                    this.needSetBusWindow.isShow  = true
                    this.mescroll[id].endErr()
                    return false
                }
                if (page.num - 1 >= this.pageBasicData.viewGroupUserItemPage2 && this.pageBasicData.isBingWechat == 0) {
                    this.bindWechatWindow.isShow = true
                    this.mescroll[id].endErr()
                    return false
                }
            }
            return true
        },
        // 显示空页面布局
        showEmpty() {
            this.contentShow = false
            this.$refs.pageEmpty.show()
        },
        // 重新请求
        requestData() {
            this.contentShow = true
            this.mescroll[this.optListAct].triggerUpScroll()
        },
        setGetFail(errcode, id) {
            if (this.optList[id].length === 0) {
                this.mescroll[id].endBySize(0, 0)
            } else {
                this.mescroll[id].endErr()
            }
            if (errcode == 1001) {
                this.needLoginWindow.isShow = true
            } else if (errcode == 1003) {
                // 显示设置业务名片弹窗
                this.showOverlay()
                this.needSetBusWindow.isShow  = true
            } else if (this.optList[id].list.length > 0 ) {
                this.showEmpty()
            }
        },
        setGetSuccess(data, id, total) {
            if (this.isDataFirstTask === 0) {
                this.isDataFirstTask = 1
                this.$emit('setPageBasicData', data)
            }
            if (Array.isArray(data.ListItem) && data.ListItem.length > 0) {
                this.$emit('setListData', {
                    data: data.ListItem,
                    id,
                })
            }
            this.mescroll[id].endBySize(data.ListItem.length, total)
        },
		getMemberList(page) { // 获取人员列表
            // console.log('page', page)
            if (this.checkIsGetMemberList('member', page) === false) return
			commonRequestData({
				apiName: `WordUserBusinessItem`,
				requestData: {
					Area: this.optList[this.optListAct].areaCode,
					Page: page.num,
                    PageSize: page.size,
                    Flag: 0,
				},
				taskId: 'WordUserBusinessItem'
			})
			.then(res => {
				console.log("获取人员列表 res：", res)
				if (res.errcode == 0) {
                    this.setGetSuccess({...res.data,memberCount: res.total}, 'member')
				} else {
                    this.setGetFail(res.errcode, 'member', res.total)
                }
			}, res => {
				console.log("fail: res", res)
				this.mescroll['member'].endErr()
			})
			.catch(res => {
				console.log("catch：res", res)
				this.mescroll['member'].endErr()
			})
		},
		getDemandList(page) {
            if (this.checkIsGetMemberList('demand', page) === false) return
			commonRequestData({
				apiName: `WordUserBusinessItem`,
				requestData: {
					Area: this.request.area,
					Page: page.num,
					PageSize: page.size,
                    Flag: 1,
				},
				taskId: 'WordUserBusinessItem'
			})
			.then(res => {
				console.log("获取人员列表 res：", res)
				if (res.errcode == 0) {
                    this.setGetSuccess(res.data, 'demand')
				} else {
                    this.setGetFail(res.errcode, 'demand', res.total)
				}
			}, res => {
				console.log("fail: res", res)
				this.mescroll['demand'].endErr()
			})
			.catch(res => {
				console.log("catch：res", res)
				this.mescroll['demand'].endErr()
			})
		},
		getHelpList(page) {
            if (this.checkIsGetMemberList('help', page) === false) return
			commonRequestData({
				apiName: `WordUserBusinessItem`,
				requestData: {
					Area: this.request.area,
					Page: page.num,
					PageSize: page.size,
                    Flag: 2,
				},
				taskId: 'WordUserBusinessItem'
			})
			.then(res => {
				console.log("获取人员列表 res：", res)
				if (res.errcode == 0) {
                    this.setGetSuccess(res.data, 'help')
				} else {
                    this.setGetFail(res.errcode, 'help', res.total)
				}
			}, res => {
				console.log("fail: res", res)
				this.mescroll['help'].endErr()
			})
			.catch(res => {
				console.log("catch：res", res)
				this.mescroll['help'].endErr()
			})
		},
        initList() {
            const that = this
            that.optIdList.forEach(item => {
				const downCallback = that.returnDownCallback(item)
				const upCallback = that.returnUpCallBack(item)
                that.mescroll[item] = new MeScroll(item, {// 在mounted生命周期初始化mescroll,以确保您配置的dom元素能够被找到.
                    down: {
                        auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
                        callback: downCallback // 下拉刷新的回调
                    },
                    up: {
                        auto: that.optListAct === item, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
                        callback: upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                        page: {
                            num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                            size: 20 // 每页数据的数量
                        },
                        noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                        toTop: { // 配置回到顶部按钮
                            src: that.scrollTopIcon
                        },
                        warpClass: 'mescroll-upwarp',
                        htmlNodata: '<div class="is-all-data">已显示全部</div',
                        empty: {
                            //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                            warpId:	`${item}-empty-info`, //父布局的id (1.3.5版本支持传入dom元素)
                            icon: that.emptyContentIcon, //图标,默认null,支持网络图
                            tip: "没有相关信息内容" //提示
                        },
                    }
                })
            })
        },
    },
    mounted() {
        // console.log('this.list', this.list)
        // this.$emit('initList')
        this.initList()
    },
    watch: {
        optListAct() {
            if (this.optList[this.optListAct].list.length === 0) {
                this.mescroll[this.optListAct].triggerUpScroll()
            }
        }
    },
    computed: {
        list() {
            return this.listData || []
        },
        optIdList() {
            return Object.keys(this.optList)
        }
    },
    components: {
        UserHeadImg,
        UserInfoOption,
        UserCardBtn,
		NeedSetBusWindow,
		NeedLoginWindow,
        BindWechatWindow,
        ImageVant,
        SexIcon,
		PageEmpty,
    },
}
</script>

<style lang="scss">
#empty-info {
    img {
        width: 120px;
    }
}
</style>

<style lang="scss" scoped>
#bus-list {
    overflow-y: scroll;
}
.content {
    width: 100%;
    height: 100%;
    .list {
        width: 100%;
        height: 100%;
        overflow-y: scroll;

        .color-999 {
            color: #999999;
        }
        
        .ul {
            /* 用户信息列表 */
            .member-li {
                padding: 15px;
                cursor: pointer;
            }

            .association-member-li:not(:last-child) {
                border-bottom: 4px solid #eeeeee;
            }

            .association-member-li-top {
                display: flex;
            }

            .association-member-li-left {
                flex-shrink: 0;
                height: 100%;
                width: 55px;
                border-radius: 5px;
                overflow: hidden;
                margin-right: 5px;
                font-size: 12px;
                position: relative;

                .thumb-box {
                    display: flex;
                    height: 100%;
                    width: 100%;
                    flex-direction: column;
                    align-items: center;
                    color: white;
                    padding: 4px;
                    justify-content: space-between;
                }

                .stick-user-head {
                    background: #f19800;
                }

                .stick-bus-head {
                    background: #00c702;
                }

                .stick-index-head {
                    background: #0197dd;
                }

                .stick-limit-head {
                    background: #cccccc;
                }

                .user-info-icon-sex {
                    position: absolute;
                    bottom: -1.5px;
                    right: 0px;
                    // z-index: 1;
                    background: white;
                    border-radius: 50%;
                    border: 0.1px solid white;
                    width: 12px;
                    height: 12px;
                }

                .user-img {
                    position: absolute;
                    bottom: 0.5px;
                    right: 0px;
                    background: white;
                    border-radius: 50%;
                    border: 0.1px solid white;
                    width: 12px;
                    height: 12px;
                }
            }

            .user-img-icon {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                border: 1px solid #f2f2f2;
            }

            .user-img-explain {
                position: absolute;
                display: block;
                width: 100%;
                text-align: center;
                background: #ff6600;
                color: white;
                font-size: 12px;
                text-align: center;
                height: 20px;
                line-height: 20px;
                bottom: -2px;
                border-radius: 10px;
            }

            .association-member-li-right {
                width: 100%;
                height: 100%;

                div {
                    height: 23px;
                    width: 100%;
                    display: -webkit-flex;
                    display: flex;
                    align-items: center;
                }

                .association-member-li-right-bottom {
                    justify-content: space-between;

                    .right {
                        width: auto;
                    }

                    .left {
                        .user-info-icon-level, .user-contribution-level-positive, .help-par-span {
                            margin-right: 4px;
                        }

                        span {
                            margin-right: 3px;
                        }

                        .icon {
                            font-size: 12px;
                            
                            &:not(:last-child) {
                                margin-right: 5px;
                            }
                        }

                        .opt-tag {
                            display: inline-block;
                            padding: 1px 2px;
                            border: 1px solid #333333;
                            border-radius: 3px;
                            color: #333333;
                            font-size: 12px;
                        }

                        .woshop-working {
                            padding: 3px;
                            font-size: 12px;
                            color: white;
                            background: #00C702;
                            border-radius: 3px;
                        }
                    }
                }

                .help-par-span {
                    color: red;

                    .help-par-icon {
                        margin-right: 2px;
                        position: relative;
                        top: 2px;
                    }
                }
            }

            .association-member-li-right-top {
                font-weight: bold;
                display: -webkit-flex;
                display: flex;
            }

            .association-member-li-right-top-left {
                width: 100%;
                height: 100%;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                box-orient: vertical;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                overflow: hidden;
            }

            .help-par-icon {
                margin-right: 2px;
            }

            .user-signature {
                color: #999999;
            }

            .user-info-icon {
                width: 15px;
                height: 15px;
                cursor: pointer;
            }

            .user-restricted {
                color: #999999;
                font-size: 12px;
            }

            .user-contribution-level-positive {
                letter-spacing: 0;
                font-size: 12px;
                cursor: pointer;

                .user-contribution-level-icon {
                    width: 15px;
                }

                .contribution-well {
                    color: #F97B02;
                }
                
                .contribution-bad {
                    color: #999999;
                }
            }

            .user-contribution-level-text {
                position: relative;
                right: 2px;
                top: 3px;
            }

            .user-info-options {
                margin-top: 6px;
            }

            .statistics {
                font-size: 12px;
                color: #999999;
                line-height: 20px;
                margin-top: 5px;

                .visit-count-icon {
                    position: relative;
                    top: 2px;
                }
            }

            .options-count-more {
                max-height: 112px;
                overflow: hidden;
            }

            .user-info-option {
                color: #999999;
                line-height: 30px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;

                .user-info-option-name {
                    color: #999999;
                }

                .user-info-option-val {
                    color: #333333;
                }
            }
        }
    }
}
// 分享提示图片结束
.mescroll-upwarp {
    padding: 0;

    .is-all-data {
        height: 60px;
        text-align: center;
        line-height: 60px;
        background: #eeeeee;
        color: #999999;
        font-size: 12px;
    }
}
</style>